<template>
	<view class="totle">
		<view class="mengbi" v-if="show">
			
		</view>
		<view class="tanchuang" v-if="tanchuang">
			验证码错误
		</view>
		<view class="search2-top">
			<view class="search2-top-left" @click="backFn">
				<image class="search2-top-left-img" src="../../../static/images/search1/back.png" mode=""></image>
			</view>
			<view class="search" @click="backSearch">
				<image class="search-img" src="../../static/images/realestate/cha@3x.png" mode=""></image>
			</view>
			<view class="search2-top-center">
				不动产登记—网通办
			</view>
			<view class="search2-top-right">
				<image class="search2-top-right-img" src="../../static/images/marriage/Frame26@3x.png" mode=""></image>
			</view>
		</view>
		<view class="prove-top">
			<view class="prove-top-right" @click="backFn">
				<image class="prove-top-back" src="../../static/images/realestate/back.png" mode="">
				</image>
				<text>返回</text>
			</view>
			<view class="prove-top-center">
				申请人信息
			</view>
			<view class="prove-top-left">
				<image class="prove-top-home" src="../../static/images/realestate/home.png" mode="" @click="backFn">
				</image>
			</view>
		</view>
		<view class="query-contnt">
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					<text class="red">*</text>申请人&nbsp;
				</view>
				<view class="query-contnt-item-right">
					{{real_name}}
				</view>
			</view>
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					<text class="red">*</text>证件类型
				</view>
				<view class="query-contnt-item-right">
					身份证
				</view>
			</view>
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					<text class="red">*</text>证件号码
				</view>
				<view class="query-contnt-item-right">
					{{shenfz}}
				</view>
			</view>
			<view class="query-contnt-item">
				<view class="query-contnt-item-left">
					<text class="red">*</text>手机号码
				</view>
				<view class="query-contnt-item-right">
					{{phone}}
				</view>
			</view>
			<view class="query-contnt-item1">
				<view class="query-contnt-item-left">
					&nbsp;&nbsp;验证码
				</view>
				<view class="query-contnt-item-right">
					<view class="yzm-div">
						<input type="text" class="yzm-text" v-model="inputtext">
					</view>
					<view class="yzm">
						<jp-verification-literalness :contentHeight="30" :contentWidth="72" @getCode="getCode"
							:securityCode="securityCode" class="yzm-img"></jp-verification-literalness>
					</view>
				</view>

			</view>
		</view>
		<view class="householder">
			<view class="householder-top">
				<view class="xian">

				</view>
				<view class="householder-top-text">
					户主账号下添加未成年子女
				</view>
			</view>
			<view class="householder-son" v-for="(item,index) in sonArrLength" :key="index">
				<view class="householder-son-name">
					<image class="delimg" src="../../static/images/realestate/deltate.png" mode="" @click="delFn(index)"></image>
					<view class="name">
						姓名
					</view>
					<view class="input">
						<input class="input-text" type="text" placeholder="请输入未成年人姓名"
							placeholder-style="color: #969798;font-size: 24rpx;" v-model="item.name">
					</view>
				</view>
				<view class="householder-son-name">
					<view class="name">
						证件号
					</view>
					<view class="input">
						<input  class="input-text" type="text" placeholder="请输入未成年人身份证号"
							placeholder-style="color: #969798;font-size: 24rpx;" v-model="item.zhengjian">
					</view>
				</view>
			</view>
			<view class="householder-bottom" @click="addFn">
				手动添加
			</view>
		</view>
		<view class="query-bottom">
			<view class="query-left" @click="backFn">
				上一步
			</view>
			<view class="query-right" @click="chaxun">
				查询
			</view>
			
		</view>
		<view class="pdf" v-if="showpdf==1" @click="lookpdf">
			查看pdf
		</view>
		<view class="notification" v-if="show">
			<view class="notification-top">
				人脸识别认证
			</view>
			<view class="notification-center">
				应国家法律法规要求，该业务需要核实您的身份
			</view>
			<view class="notification-bottom">
				<view class="notification-bottom-left" @click="quxiaoFn">
					取消
				</view>
				<view class="notification-bottom-right" @click="faceSwipingFn">
					立即刷脸
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
		import face from "@/uni_modules/mcc-face/index.js"
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getUserInfo,
		getHourseInfo,
		getFanwei
	} from '@/api/user'
const tanchuang=ref(false)
	const securityCode = ref('')
	const getCode = () => {
			securityCode.value = sui()
	}
	const show = ref(false)
	const sui = () => {
		var str = '0123456789';
		var str2 = '';
		for (var i = 0; i < 4; i++) {
			var n = Math.round(Math.random() * 10)

			str2 = str2 + str[n]
		}
		return str2

	}
	const fanwei=ref('')
	onLoad((options)=>{
		fanwei.value=options.fanwei
	})

	const info = ref({})
	const inputtext = ref('')

	onShow(() => {
		getinfo()
		securityCode.value = sui()
	})
	const real_name = ref('')
	const shenfz = ref('')
	const phone = ref('')
	const getinfo = async () => {
		const data = await getUserInfo()
		info.value = data
		real_name.value = formatName(info.value.real_name)
		shenfz.value = formatShen(info.value.card)
		phone.value = mobile(info.value.mobile)
	}
	const formatName = (str) => {
		return new Array(str.length).join('*') + str.substr(-1);
	}
	const formatShen = (str) => {
		return str[0] + '****************' + str[str.length - 1]
	}

	function mobile(data) {
		return data.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
	}
	const sonArrLength = ref([])
	const backFn = () => {
		uni.navigateBack(-1)
	}
	const backSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search1'
		})
	}
	const addFn = () => {
		sonArrLength.value.push({
			name: '',
			zhengjian: ''
		})
	}




	const chaxun = () => {
		if(real_name.value==''){
			return uni.showToast({
				title:'请登录',
				duration:2000,
				icon:'none'
			})
		}
		if(inputtext.value==securityCode.value){
			show.value = true
		}else{
			securityCode.value = sui()
			tanchuang.value=true
			setTimeout(()=>{
				tanchuang.value=false
			},1000)
		}
	}
	
	let quhao2=[
		{
			name:'烟台芝罘区',
			quhao:'02'
		},
		{
			name:'烟台福山区',
			quhao:'11'
		},
		{
			name:'烟台牟平区',
			quhao:'12'
		},{
			name:'烟台莱山区',
			quhao:'13'
		},{
			name:'烟台高新区',
			quhao:'71'
		},{
			name:'烟台开发区',
			quhao:'72'
		}
	]
	const quhaoFn=(name)=>{
		for(var i=0;i<quhao2.length;i++){
			console.log(quhao2[i]);
			if(quhao2[i].name==name){
				quhao1.value=quhao2[i].quhao
				// console.log(quhao1.value,'quhao1.value');
			}
		}
	}
	const quhao1=ref('')
	// 控制pdf按钮展示
	const showpdf=ref('0')
	const pdf_img=ref('')
	// 立即刷脸
	const faceSwipingFn= ()=>{
		face.open(['a','b','c','b','c'],function(e){})
		show.value = false
		quhaoFn(fanwei.value)
		let aaa={
			card:info.value.card,
			fanwei:fanwei.value,
			quhao:quhao1.value
		}
		// console.log(aaa,'aaaaaaaaaaa');
		
		getHourseInfo(aaa).then(res=>{
			pdf_img.value=res.shuju
			// console.log(pdf_img.value,'pdf_img.value');
		})
	
		setTimeout(()=>{		
			face.close()
			
		},5000)
		
		setTimeout(()=>{
			showpdf.value='1'
		},1000)
		
	}
	
	
	
	// 取消
	const quxiaoFn=()=>{
		show.value = false
	}
	
	const a=ref('0')
	// 删除未成年子女一个列表
	const delFn=(index)=>{
	
		sonArrLength.value.splice(index,1);
		
	}
	
	// 查看pdf
	const lookpdf=()=>{
		console.log(pdf_img.value,'6666666666666666');
		let aa={
			card:info.value.card,
			pdf_img1:pdf_img.value,
			fanwei:fanwei.value,
			quhao:quhao1.value
		}
		console.log(aa,'aa');
		console.log(11111111111);
		const params = encodeURIComponent(JSON.stringify(aa));
		uni.navigateTo({
			url:'/pages/realestate/lookpdf?params='+params
		})

	}
</script>

<style scoped lang="scss">
	.mengbi {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 33;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.totle{
		margin-bottom: 40rpx;
	}
	.tanchuang{
		position: fixed;
		z-index: 33;
		padding: 40rpx 100rpx;
		background-color: rgba(40, 44, 53, 0.6);
		color: #fff;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius: 20rpx;
	}
	.search2-top {
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top: 96rpx;
		display: flex;

		.search2-top-left {
			width: 10%;

			.search2-top-left-img {
				width: 88rpx;
				height: 88rpx;
			}
		}

		.search {
			width: 10%;

			.search-img {
				width: 88rpx;
				height: 88rpx;
			}
		}

		.search2-top-center {
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 65%;
			padding-left: 38rpx;
			line-height: 88rpx;
		}

		.search2-top-right {
			width: 15%;
			display: flex;

			.search2-top-right-img {
				width: 80rpx;
				height: 80rpx;
			}

		}

	}

	.prove-top {
		width: 100%;
		display: flex;
		height: 86rpx;
		background: #3E87FF;
		line-height: 86rpx;
		padding: 0 28rpx;

		.prove-top-right {
			width: 20%;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			.prove-top-back {
				width: 36rpx;
				height: 36rpx;
				vertical-align: middle;
			}

		}

		.prove-top-center {
			width: 60%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

		}

		.prove-top-left {
			width: 20%;

			position: relative;

			.prove-top-home {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translate(0, -50%);
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;

			}
		}
	}

	.query-contnt {
		width: 92%;
		margin-left: 4%;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 16rpx 26rpx;
		margin-top: 24rpx;

		.query-contnt-item1 {
			display: flex;
			// height: 88rpx;
			padding-top: 28rpx;
			// line-height: 88rpx;
			line-height: 49rpx;
			position: relative;

			.query-contnt-item-left {
				padding-right: 50rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #323233;

				.red {
					color: red;
				}
			}

			.query-contnt-item-right {
				padding-bottom: 28rpx;
				border-bottom: 2rpx solid #EBEDF0;
				// flex: 1;
				display: flex;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #969798;

				.yzm-div {
					flex: 1;

					.yzm-text {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

				}

				.yzm {
					position: absolute;
					right: 0;
					top: 15rpx;
					width: 152rpx;
					height: 60rpx;
					// background: #D9D9D9;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;

					.yzm-img {
						width: 152rpx;
						height: 60rpx;
					}
				}

			}
		}

		.query-contnt-item {
			display: flex;
			// height: 88rpx;
			padding-top: 28rpx;
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid #EBEDF0;
			// line-height: 88rpx;
			line-height: 49rpx;
			position: relative;

			.query-contnt-item-left {
				width: 28%;
				// padding-right: 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #323233;

				.red {
					color: red;
				}
			}

			.query-contnt-item-right {
				flex: 1;
				display: flex;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #969798;

				.choose-text {
					// width: 90%;
				}

				.choose {
					flex: 1;

					.choose-img {
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
						position: absolute;
						right: 44rpx;
						// left: 254rpx;
						top: 35rpx;
					}
				}

				.uni-padding-wrap {
					.radio {
						display: flex;

						.radio1 {
							margin-left: 48rpx;
						}

						.radio2 {
							margin-left: 70rpx;
						}
					}
				}
			}
		}

		.no-border {
			border: 0;
		}

	}

	.householder {
		width: 92%;
		margin-left: 4%;
		margin-top: 22rpx;

		.householder-top {
			display: flex;

			.xian {
				width: 6rpx;
				height: 40rpx;
				background: #3F9EFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				margin-right: 24rpx;
			}

			.householder-top-text {

				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.householder-son {
			margin-top: 28rpx;
			height: 256rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			padding: 18rpx 48rpx;
			position: relative;

			.householder-son-name {
				display: flex;

				.delimg {
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					top: 16rpx;
					right: 16rpx;
				}

				.name {
					width: 30%;
					height: 110rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #464647;
					line-height: 110rpx;
				}

				.input {
					flex: 1;
					height: 110rpx;
					padding-top: 20rpx;
					border-bottom: 2rpx solid #EBEDF0;

					.input-text {

						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #464647;

					}
				}
			}
		}

		.householder-bottom {
			margin-top: 76rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			text-align: center;
			line-height: 68rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #888888;

		}
	}

	.query-bottom {
		width: 92%;
		margin-left: 4%;
		margin-top: 96rpx;
		display: flex;

		.query-left {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
		}

		.query-right {
			width: 542rpx;
			height: 72rpx;
			background: linear-gradient(93deg, #4089FF 0%, #0063FF 100%);
			box-shadow: 0rpx 4rpx 22rpx 0rpx #0465FF;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			opacity: 1;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 72rpx;

		}
	}
	.pdf{
		width: 92%;
		margin-left: 4%;
		margin-top: 96rpx;
		height: 78rpx;
		background: linear-gradient(90deg, #FFB200 0%, #FF6C00 100%);
		border-radius: 39rpx 39rpx 39rpx 39rpx;
		text-align: center;
		line-height: 78rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		
		
	}
	.notification {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 614rpx;
		// height: 282rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		z-index: 43;
	
		.notification-top {
			text-align: center;
			margin-top: 36rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
	
		}
	
		.notification-center {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 22rpx;
			margin-bottom: 34rpx;
	
		}
	
		.notification-bottom {
			display: flex;
			justify-content: space-evenly;
			text-align: center;
			align-items: center;
			border-top: 1rpx solid #EEEEEE;
			height: 126rpx;
		
			.notification-bottom-left {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333;
				background-color: #efefef;
		
			}
		
			.notification-bottom-right {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #fff;
				background-color: #5377e7;
		
			}
		}
	}
</style>